<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
		<meta name="description" content="This page contains a list of animals">
        <meta name="author" content="Zainul Franciscus">
		
        <title>List of Animals</title>
        
		<link type="text/css" rel="stylesheet" href="css/main.css" />
		<script type="text/javascript" src="scripts/lib/jquery/jquery.js"></script>
        <script type="text/javascript" src="scripts/lib/jquery/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="scripts/lib/jquery/jquery.dateFormat-1.0.js"></script>
		<script type="text/javascript" src="scripts/src/common.js"></script>
		<script type="text/javascript">
			
			$(document).ready(function() {

				$.ajax({
				  async: false,
				  dataType: "jsonp",
				  url: "https://tasks.inlogik.com/devtest/animals",
				  success: createTable
				});
			} );
			
			function createTable(jsonData){
				
				var table = $('#animalTbl').dataTable( {
								"aaData": jsonData,					
								"oLanguage": {
									"sSearch": "", "sLoadingRecords": "Please wait - loading..."
								},
								"aoColumns": [
									{ "mData": "name" },
									{ "mData": "type" },
									{ "mData": "birthday", "mRender" : toDDmmYYYY},
									{ "mData": "weight" },
									{ "mData": "hasHorns", "mRender" : renderCheckBox, "iDataSort": 6},
									{ "mData" : "id", "mRender" : renderAction, "bSortable": false},
									{ "mData": "hasHorns", "bVisible" : false}
								]
							} );  
										
				return table;
			}
	
		</script>
    </head>
    <body>
    <div class="dataTables_wrapper">   
		<table id="animalTbl" class="tblClass">
			<thead>
				<tr>
					<th>Name</th>
					<th>Type</th>
					<th>Birthday</th>
					<th>Weight</th>
					<th>Horns ?</th>
					<th>Actions</th>
					<!-- 
					This columns stores hasHorns value of each animal. This columns is used for sorting the table 
					when user clicks the Horns ? column to sort the table.
					-->
					<th>Hidden hasHorn Value</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
    </div>
    </body>
</html>
